<!--漏斗类型-->
<template>
	<el-row>
		<el-col :span="12">
			<ViewFunnel :funnelReportResData="funnelData.funnelReportResData" v-loading="loading"></ViewFunnel>
		</el-col>
		<el-col :span="12">
			<div :id="'chart_funnel' + config.id" class="chart"></div>
		</el-col>
	</el-row>
</template>

<script>
	import { funnelData } from "./mock";
	import ViewFunnel from "../funnelAnalysis/viewFunnel";
	import {
		funnelReportRes
	} from "../funnelAnalysis/api.config.js";

	export default {
    name: "funnelPanel",
		data() {
    	return {
				funnelData,
				funnelReportResData: funnelData.funnelReportResData,
				byValues: funnelData.byValues,
				loading: false,
				/* 趋势图表 */
				chartView: {},
			}
		},
		props: {
			/* 视图类型 */
			state: {
				type: String,
				default: "overview", // trends 趋势 | overview 对比或漏斗
			},
			config: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},

		components: {
			ViewFunnel
		},
		mounted() {
    	this.loading = true;
    	this.$nextTick(() => {
				this.viewChart();
				this.loading = false;
			});
		},
		methods:{
			/* 初始化对比选项 */
			initContrastFunnelOpts() {
				let t = this;
				t.contrastFunnel.opts = [];
				t.contrastFunnel.selecteds = [
					{ ind: 0, name: "总体" },
					{ ind: 0, name: "总体" }
				];

				if (t.viewFunnelTypes.arr_check.length <= 0) {
					return;
				}

				let byValuesList = t.funnelReportResData.byValuesList;
				for (let i = 0; i < byValuesList.length; i++) {
					let arr = byValuesList[i];
					let str = "";

					for (let j = 0; j < arr.length; j++) {
						let val = arr[j];
						str = str + val + (j === arr.length - 1 ? "" : ", ");
					}

					if (i === 0) {
						t.contrastFunnel.opts.push({ ind: 0, name: "总体" });
					} else {
						t.contrastFunnel.opts.push({ ind: i, name: str });
					}
				}

				// 默认总体
				t.contrastFunnel.selecteds[0] = t.contrastFunnel.opts[0];
				t.contrastFunnel.selecteds[1] = t.contrastFunnel.opts[1];
			},

			/* 查询漏斗内容 */
			searchFunnel() {
				let t = this;
				t.loading = true;
				let appid = this.$store.state.global.appItem.appId;

				let param = {
					// id: t.analysisOpts.value.id,
					//
					// funnelId: t.analysisOpts.value.id, // 当前已选漏斗 id
					// byFields: t.getByFields(), // 按 xx 查看
					//
					// filter: this.$refs.customScreenRef.getFilterConditions(), // 自定义漏斗筛选
					//
					// fromDate: t.winPeriod[0], // 窗口期 开始时间
					// toDate: t.winPeriod[1], // 窗口期 结束时间
					//
					// sub_task_type: "FUNNEL", // 漏斗模块写死的值
					//
					// // TODO 以下字段前期默认空值
					// byFieldSteps: [],
					// filterFieldSteps: [],
					// bucketParams: {},
					// bookmarkid: ""
				};

				funnelReportRes(param, appid)
					.then(res => {
						console.log("漏斗内容 = ", res.data);

						// TODO 特殊接口，暂不需要弹窗提示
						/*if (res.code !== 200) {
              t.loading = false;
              this.$alert(res.data.msg, '提示', { type: 'warning'});
              return;
            }*/

						// 接口返回成功后 loading 150 毫秒后消失，因为太快消失的话用户看不见 loading，一闪而过了
						setTimeout(() => {
							t.loading = false;
						}, 150);

						t.funnelReportResData = res.data;
						t.initContrastFunnelOpts();

						setTimeout(() => {
							t.viewChart();
						});
					})
					.catch(error => {
						t.loading = false;
						console.log("error = ", error);
					});
			},

			/* 渲染图表 */
			viewChart() {
				let t = this;

				// 如果当前是 对比或漏斗 视图，则不需要展示图表
				// if (t.state === "overview") {
				// 	return;
				// }

				let dom = document.getElementById("chart_funnel"+ this.config.id);
				console.log(dom);
				t.chartView = t.$echarts.init(dom);

				// 图表模板
				let tem = {
					xAxis: {
						type: "category",
						axisLabel: { interval: 0, rotate: -40 },
						data: []
					},
					tooltip: {
						trigger: "axis"
					},
					legend: {
						data: []
					},
					yAxis: {
						type: "value",
						axisLabel: {
							formatter: "{value} %"
						}
					},
					series: []
				};

				let funnelReportResData = t.funnelReportResData;
				let dateList = funnelReportResData.dateList;
				let funnelDetail = funnelReportResData.funnelDetail;
				let eventNames = funnelReportResData.eventNames;

				// 图表横坐标，因为 dateList 第 0 个是 '$ALL'，所以从第 1 个开始
				for (let i = 1; i < dateList.length; i++) {
					tem.xAxis.data.push(dateList[i]);
				}

				// 步骤
				for (let i = 0; i < eventNames.length; i++) {
					let size = i === 0 ? "总体转化" : "第 " + i + " 步转化";
					tem.legend.data.push(size);
					tem.series.push({
						name: size,
						type: "line",
						data: [],

						// 参考线/辅助线
						markLine: { data: [{ type: "average", name: "平均值" }] }
					});
				}

				// 坐标值
				for (let i = 1; i < dateList.length; i++) {
					let item = funnelDetail[i];

					for (let j = 0; j < item.steps.length; j++) {
						let cItem = item.steps[j];
						if (j === 0) {
							tem.series[j].data.push(item.completionRate);
						} else {
							tem.series[j].data.push(cItem.conversionRate);
						}
					}
				}

				this.$nextTick(() => {
					t.chartView.clear();
					t.chartView.setOption(tem);
					t.autoChart();
				});
			},

			/* 图表大小自适应 */
			autoChart() {
				// 如果当前是 对比 视图，则不需要渲染图表
				// if (this.state === "overview") {
				// 	return;
				// }
				console.log(this.chartView, "chartView");
				this.chartView && this.chartView.resize();
			},
		}
  }
</script>

<style scoped lang="scss">

	.funnelViewBox {
		.el-container { margin-bottom: 10px; height: auto; }

		.conversionRatesBox {
			text-align: center;

			.viewValBox {
				width: 60px;
				background-color: #eaeff4;
				padding: 5px 0;
				margin: 0 auto -3px auto;
			}

			.icon-arrow { width: 100px; }
		}

		/* 总转化率 */
		.collectBox .viewValBox { width: 100px; }

		.stepBox {
			height: 28px;
			line-height: 26px;
			background-color: #fafafa;
			border: 1px solid #e7e7e7;

			.stepNum {
				display: inline-block;
				height: 17px;
				line-height: 17px;
				width: 17px;
				margin: 0 5px;
				text-align: center;
				vertical-align: middle;
				background: #c3e6d0;
				color: #2dca93;
			}

			.stepUser { float: right; padding: 0 10px; }
		}

		.el-main {
			padding: 0;

			.stepBar {
				height: 30px;
				background-color: #57a3e3;
			}
		}
	}

	.el-container .el-main {
		text-align: center;
		background-color: transparent;
	}

	.chart {
		width: 100%;
		height: 5rem;
		position: relative;
	}

</style>
